import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:smart_devices/icons/src/antd_icons.dart';
import 'package:smart_devices/model/device.dart';
import 'package:smart_devices/routes/index.dart';
import 'package:smart_devices/ui/image_overlay.dart';
import 'package:smart_devices/ui/scroll_refresh_config.dart';
import 'package:smart_devices/utils/colors.dart';
import 'package:smart_devices/utils/styles.dart';
import 'package:smart_devices/utils/tools.dart';

import 'list_logic.dart';

class DeviceListView extends GetView<DeviceListLogic> {
  const DeviceListView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      builder: (_) {
        return Scaffold(
            backgroundColor:
                ColorsUtils.parseColorFromHexString(ColorsUtils.colorF6f6),
            appBar: AppBar(
              leading: IconButton(
                icon: const Icon(
                  Icons.arrow_back_ios,
                  color: Colors.white,
                  size: 15,
                ),
                onPressed: Get.back,
              ),
              automaticallyImplyLeading: false,
              backgroundColor:
                  ColorsUtils.parseColorFromHexString(ColorsUtils.color0052),
              title: ObxValue(
                  (data) => Text(
                        '设备列表${data.value}台',
                        style: StylesUtils.customTextStyle(
                            fontSize: 18, fontWeight: FontWeight.w700),
                      ),
                  controller.total),
              centerTitle: true,
              systemOverlayStyle: SystemUiOverlayStyle.dark,
              actions: [
                IconButton(
                  icon: const Icon(
                    AntdIcons.plus,
                    color: Colors.white,
                    size: 20,
                  ),
                  onPressed: () {
                    Get.toNamed(Routes.deviceAdd);
                  },
                )
              ],
            ),
            body: Obx(() => Column(
                  children: [
                    Container(
                      height: 50,
                      padding: const EdgeInsets.symmetric(
                          horizontal: 15, vertical: 7),
                      decoration: const BoxDecoration(color: Colors.white),
                      child: Row(
                        children: [
                          Expanded(
                              child: Container(
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(5),
                                border: Border.all(
                                    color: ColorsUtils.parseColorFromHexString(
                                        ColorsUtils.colorE4e4))),
                            child: Row(
                              children: [
                                Container(
                                  width: 36,
                                  alignment: Alignment.center,
                                  child: ToolsUtils.assetImageSvg('u2232.svg'),
                                ),
                                Expanded(
                                    child: TextField(
                                  textDirection: TextDirection.ltr,
                                  controller: TextEditingController(
                                      text: controller.search.value),
                                  cursorColor:
                                      ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.color1c24),
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 16,
                                      color: ColorsUtils.color1c24),
                                  textAlign: TextAlign.left,
                                  textAlignVertical: TextAlignVertical.center,
                                  cursorWidth: 2,
                                  // cursorHeight: 18,
                                  cursorRadius: const Radius.circular(2),
                                  decoration: InputDecoration(
                                      hintText: '请输入设备编码/设备名称',
                                      hintStyle: StylesUtils.customTextStyle(
                                          color: ColorsUtils.colorCccc,
                                          fontSize: 13),
                                      isDense: true,
                                      isCollapsed: true,
                                      border: InputBorder.none,
                                      focusColor:
                                          ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.color1c24),
                                      contentPadding:
                                          const EdgeInsets.symmetric(
                                              vertical: 13),
                                      focusedBorder: InputBorder.none),
                                  onChanged: (String text) {
                                    controller.search.value = text;
                                  },
                                ))
                              ],
                            ),
                          )),
                          Container(
                            width: 60,
                            alignment: Alignment.centerRight,
                            child: TextButton(
                              onPressed: () {
                                Get.toNamed(Routes.deviceScreen);
                              },
                              child: Text.rich(TextSpan(children: [
                                WidgetSpan(
                                    alignment: PlaceholderAlignment.middle,
                                    child: ToolsUtils.assetImageSvg('u2227.svg',
                                        width: 15, height: 15)),
                                TextSpan(
                                    text: '筛选',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333))
                              ])),
                            ),
                          )
                        ],
                      ),
                    ),
                    Expanded(child: scrollRefreshConfig(context))
                  ],
                )));
      },
      init: controller,
    );
  }

  Widget buildBody(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverPersistentHeader(
          delegate: _SliverCustomHeaderDelegate(search: controller.search),
          pinned: true,
        ),
        builderSliverList()
      ],
    );
  }

  Widget scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: controller.refreshController,
      onRefresh: controller.onRefresh,
      onLoading: controller.onLoading,
      child: listViewBuilder(),
    );
  }

  Widget builderSliverList() {
    return SliverList.builder(
      itemBuilder: (BuildContext context, int index) {
        DeviceModel model = controller.pageList[index];
        return Container(
          height: 100,
          margin: const EdgeInsets.only(top: 15),
          decoration: const BoxDecoration(color: Colors.white),
          child: Row(
            children: [
              Container(
                width: 100,
                alignment: Alignment.center,
                child: ImageOverlay(
                  width: 80,
                  height: 80,
                  image: NetworkImage(model.imgUrl),
                ),
              ),
              Expanded(
                  child: Column(
                children: [
                  Expanded(
                      child: Container(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      model.name,
                      style: StylesUtils.customTextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          color: ColorsUtils.color3333),
                    ),
                  )),
                  Expanded(
                      child: Container(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      model.code,
                      style: StylesUtils.customTextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                          color: ColorsUtils.colorAaaa),
                    ),
                  )),
                  Expanded(
                      child: Container(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      model.location,
                      style: StylesUtils.customTextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                          color: ColorsUtils.colorAaaa),
                    ),
                  )),
                ],
              ))
            ],
          ),
        );
      },
      itemCount: controller.pageList.length,
    );
  }

  Widget listViewBuilder() {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return InkWell(
            onTap: () {
              Get.toNamed(Routes.deviceInfo,
                  arguments: controller.pageList[index].code);
            },
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 10),
              margin: const EdgeInsets.only(top: 15),
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                children: [
                  Container(
                    width: 100,
                    alignment: Alignment.center,
                    child: ImageOverlay(
                      width: 80,
                      height: 80,
                      image: NetworkImage(controller.pageList[index].imgUrl),
                    ),
                  ),
                  Expanded(
                      child: Column(
                    children: [
                      Expanded(
                          child: Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          controller.pageList[index].name,
                          style: StylesUtils.customTextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: ColorsUtils.color3333),
                        ),
                      )),
                      Expanded(
                          child: Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          controller.pageList[index].code,
                          style: StylesUtils.customTextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: ColorsUtils.colorAaaa),
                        ),
                      )),
                      Expanded(
                          child: Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          controller.pageList[index].location,
                          style: StylesUtils.customTextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: ColorsUtils.colorAaaa),
                        ),
                      )),
                    ],
                  ))
                ],
              ),
            ));
      },
      itemCount: controller.pageList.length,
      itemExtent: 120,
    );
  }
}

class _SliverCustomHeaderDelegate extends SliverPersistentHeaderDelegate {
  final RxString search;

  _SliverCustomHeaderDelegate({required this.search});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      height: 50,
      padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 7),
      decoration: const BoxDecoration(color: Colors.white),
      child: Row(
        children: [
          Expanded(
              child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                border: Border.all(
                    color: ColorsUtils.parseColorFromHexString(
                        ColorsUtils.colorE4e4))),
            child: Row(
              children: [
                Container(
                  width: 36,
                  alignment: Alignment.center,
                  child: ToolsUtils.urlSvg(
                      'https://cdn7.axureshop.com/demo2023/2163241/images/常用组件/u2227.svg'),
                ),
                Expanded(
                    child: TextField(
                  textDirection: TextDirection.ltr,
                  controller: TextEditingController(text: search.value),
                  cursorColor: ColorsUtils.parseColorFromHexString(
                      ColorsUtils.color1c24),
                  style: StylesUtils.customTextStyle(
                      fontSize: 16, color: ColorsUtils.color1c24),
                  textAlign: TextAlign.left,
                  textAlignVertical: TextAlignVertical.center,
                  cursorWidth: 2,
                  // cursorHeight: 18,
                  cursorRadius: const Radius.circular(2),
                  decoration: InputDecoration(
                      hintText: '请输入设备编码或者设备名称',
                      hintStyle: StylesUtils.customTextStyle(
                          color: ColorsUtils.colorCccc, fontSize: 13),
                      isDense: true,
                      isCollapsed: true,
                      border: InputBorder.none,
                      focusColor: ColorsUtils.parseColorFromHexString(
                          ColorsUtils.color1c24),
                      contentPadding: const EdgeInsets.symmetric(vertical: 13),
                      focusedBorder: InputBorder.none),
                  onChanged: (String text) {
                    search.value = text;
                  },
                ))
              ],
            ),
          )),
          Container(
            width: 60,
            alignment: Alignment.centerRight,
            child: Text.rich(TextSpan(children: [
              WidgetSpan(
                  child: ToolsUtils.urlSvg(
                      'https://cdn7.axureshop.com/demo2023/2163241/images/常用组件/u2222.svg',
                      width: 15,
                      height: 15)),
              TextSpan(
                  text: '刷选',
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.color3333))
            ])),
          )
        ],
      ),
    );
  }

  @override
  double get maxExtent => 50;

  @override
  double get minExtent => 50;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}
